<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')

    // 画图开始:开启一条路径
    ctx.beginPath()
    // 确定起始点
    ctx.moveTo(100, 100)
    // 确定结束点
    ctx.lineTo(400, 100)
    // 在着色之前设置颜色和线宽
    ctx.strokeStyle = 'green'
    ctx.lineWidth = 2
    // 着色
    ctx.stroke()
    // 结束路径
    ctx.closePath()


    // 画图开始:开启一条路径
    ctx.beginPath()
    // 确定起始点
    ctx.moveTo(400, 100)
    // 确定结束点
    ctx.lineTo(400, 400)
    // 在着色之前设置颜色和线宽
    ctx.strokeStyle = 'yellow'
    ctx.lineWidth = 2
    // 着色
    ctx.stroke()
    // 结束路径
    ctx.closePath()


    // 画图开始:开启一条路径
    ctx.beginPath()
    // 确定起始点
    ctx.moveTo(400, 400)
    // 确定结束点
    ctx.lineTo(100, 400)
    // 在着色之前设置颜色和线宽
    ctx.strokeStyle = 'red'
    ctx.lineWidth = 2
    // 着色
    ctx.stroke()
    // 结束路径
    ctx.closePath()


    // 画图开始:开启一条路径
    ctx.beginPath()
    // 确定起始点
    ctx.moveTo(100, 400)
    // 确定结束点
    ctx.lineTo(100, 100)
    // 在着色之前设置颜色和线宽
    ctx.strokeStyle = 'green'
    ctx.lineWidth = 2
    // 着色
    ctx.stroke()
    // 结束路径
    ctx.closePath()

</script>
</body>
</html>
